<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="task-list">
      <div v-if="!gwDelFlag" class="task-item" @click="viewTaskSwlyDetail('gw')">
        <div class="task-icon"></div>
        <div class="task-name">固网补充部分</div>
        <div class="task-percent"><span class="done">{{ swlyData.resultGwId == null ? '未填写' : '已填写' }}</span> </div>
      </div>
      <div v-else class="task-item disabled">
        <div class="task-icon"></div>
        <div class="task-name">固网补充部分已删除</div>
      </div>
      <div v-if="!sxDelFlag" class="task-item" @click="viewTaskSwlyDetail('sx')">
        <div class="task-icon"></div>
        <div class="task-name">双线补充部分</div>
        <div class="task-percent"><span class="done">{{ swlyData.resultSxId == null ? '未填写' : '已填写' }}</span> </div>
      </div>
      <div v-else class="task-item">
        <div class="task-icon"></div>
        <div class="task-name">双线补充部分已删除</div>
      </div>

      <div v-if="finishFlag">
        <div style="text-align: center; position: fixed; left: 25%; right: 25%; bottom: 5%">
          <div class="form-btn disabled" >当前小区任务已完成</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {communitySwlyPercent, getCommunityInfo} from '@/api/publicline/kdcs'

export default {
  data() {
    return {
      finishFlag: false,
      gwDelFlag: false,
      sxDelFlag: false,
      breadcrumb: [],
      swlyData: [],
    }
  },
  created() {
    const { communityId, breadcrumb, buildId } = this.$route.query;
    this.communityId = communityId;
    this.buildId = buildId
    this.breadcrumb = breadcrumb.split('/');
    this.getCommunityInfo()
    this.getSwlyData();
  },
  methods: {
    getCommunityInfo() {
      getCommunityInfo( { VILLAGE_ID: this.communityId } )
        .then( res => {
          if ( res.success ) {
            const data = res.result.data;
            if(data.state === '2') {
              this.finishFlag = true
            }
          }
        } )
    },
    getSwlyData() {
      communitySwlyPercent({ VILLAGE_ID: this.communityId, BUILD_ID: this.buildId })
        .then(
          res => {
            if (res.success) {
              const data = res.result
              this.swlyData = data
              this.gwDelFlag = data.gwDelFlag === '1'
              this.sxDelFlag = data.sxDelFlag === '1'
              console.log(this.swlyData)
            }
          }
        )
    },
    viewTaskSwlyDetail(type) {
      let path = ''
      let taskId = ''
      let name = ''
      if(type === 'gw') {
        path = "/publicline/kdcs/swly-gw-form"
        taskId = this.swlyData.resultGwId
        name = '固网新增任务'
      } else if (type === 'sx') {
        path = "/publicline/kdcs/swly-sx-form"
        taskId = this.swlyData.resultSxId
        name = '双线新增任务'
      }
      this.$router.push( {
        path: path,
        query: {
          communityId: this.communityId,
          taskId: taskId,
          buildId: this.buildId,
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    },
    deleteWjdc(id) {
      console.log(id
      )
    }
  }
}
</script>

<style lang="less" scoped>
.form-btn {
  padding: 10px 10px;
  border-radius: 4px;
  background: #008cff;
  color: #FFF;

  &.danger {
    background: #ff3700;
    color: #FFF;
  }
}
.page {
  background: #FFF;
}
.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}
.task-list {
  padding: 20px 0;

  .disabled {
    background: #EEE;
    color: #777;
    border-color: #ccc;
  }

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #333;
    border-radius: 6px;
    width: 70%;
    // justify-content: space-between;
    align-items: center;

    .task-icon {
      width: 40px;
      height: 40px;
      text-align: left;
    }
    .task-name {
    }
    .task-percent {
      width: 100px;
      text-align: right;
    }
  }

  .disabled {
    background: #EEE;
    color: #777;
    border-color: #ccc;
  }
}
</style>